<template>
  <div>
    <!-- 面包屑 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/home">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
     </el-breadcrumb>
     <el-card shadow="always" :body-style="{ padding: '20px'}">
        <el-form :model="params"  label-width="80px" :inline="true" size="small">
            <el-form-item label="姓名">
                <el-input v-model="params.trueName"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="params.phone"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" size="default" @click="searchBtn" icon="el-icon-search">查询</el-button>
                <el-button type="primary" size="default" @click="resetBtn" icon="el-icon-delete">重置</el-button>
                <el-button type="primary" size="default" @click="addUser" icon="el-icon-plus">添加</el-button>  
            </el-form-item>
            <el-table :data="tableList" border stripe>
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="姓名" prop="trueName"></el-table-column>
                <el-table-column label="电话" prop="phone"></el-table-column>
                <el-table-column label="性别" prop="sex">
                    <template slot-scope="scope">
                        <el-tag type="danger" size="small" v-if="scope.row.sex==0">女</el-tag>
                        <el-tag type="danger" size="small" v-if="scope.row.sex==1">男</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="身份证号" prop="idCard"></el-table-column>
                <el-table-column label="用户名" prop="username"></el-table-column>
                <el-table-column label="身份" prop="isAdmin">
                    <template slot-scope="scope">
                        <el-tag type="danger" size="small" v-if="scope.row.isAdmin==0">业主</el-tag>
                        <el-tag type="danger" size="small" v-if="scope.row.isAdmin==1">物主</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="在职状态" prop="status">
                    <template slot-scope="scope">
                            <el-switch v-model="scope.row.status" 
                            :active-value="true" 
                            active-text="在职 "
                            inactive-text="离职"
                            :inactive-value="false"
                            @change="changeUserStatus(scope.row)">
                            </el-switch>
                            
                    </template>

                </el-table-column>
                <el-table-column label="是否可用" prop="enabled">
                    <template slot-scope="scope">
                            <el-switch v-model="scope.row.enabled" 
                            :active-value="true" 
                            active-text="可用 "
                            inactive-text="禁用"
                            :inactive-value="false"
                            @change="changeUserEnabled(scope.row)">
                            </el-switch>
                            
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" size="small" @click="editUser(scope.row)">编辑</el-button>
                            <el-button type="primary" icon="el-icon-delete" size="small" @click="deleteUser(scope.row)">删除</el-button>
                            <el-button type="primary" icon="el-icon-delete" size="small" :disabled="scope.row.isAdmin==1" @click="assignRole(scope.row)">分配角色</el-button>
                            
                        </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="sizeChange"
            @current-change="currentChange"
            :current-page.sync="params.currentPage"
            :page-size="params.pageSize"
            :page-sizes="[5,10,20,40]"
            layout="total,sizes,prev,pager,next,jumper"
            :total="params.total" background
            :pager-count="7"
            ></el-pagination>
        </el-form>
        
     </el-card>

     <el-dialog
        :title="editDialog.title"
        :visible.sync="editDialog.visible"
        :width="editDialog.width"
        >
         <!-- 表单 -->
         <el-form :model="editModel" ref="editForm" :rules="rules" label-width="80px" :inline="true" size="small">
                <el-form-item label="姓名:" prop="trueName">
                    <el-input v-model="editModel.trueName"></el-input>
                </el-form-item>
                <el-form-item prop="sex" style="width: 280px" label="性别:">
                    <el-radio-group v-model="editModel.sex">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="phone" label="电话:">
                    <el-input v-model="editModel.phone"></el-input>
                </el-form-item>
                <el-form-item prop="idCard" label="身份证:">
                    <el-input v-model="editModel.idCard"></el-input>
                </el-form-item>
                <el-form-item prop="username" label="用户名:">
                    <el-input v-model="editModel.username"></el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码:" v-if="editModel.type=='0'">
                    <el-input type="password" v-model="editModel.password"></el-input>
                </el-form-item>
                <el-form-item prop="status" style="width: 280px" label="离职:">
                    <el-radio-group v-model="editModel.status">
                        <el-radio :label='true'>在职</el-radio>
                        <el-radio :label='false'>离职</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="enabled" style="width: 280px" label="启用:">
                    <el-radio-group v-model="editModel.enabled">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        <span slot="footer">
            <el-button @click="onClose">取消</el-button>
            <el-button type="primary" @click="onConfirm">确认</el-button>
        </span>
     </el-dialog>

     <!-- 分配角色对话框 -->
     <el-dialog
            :title="assignDialog.title"
            :visible.sync="assignDialog.visible"
            :width="assignDialog.width">
            <el-table :data="roleTableList" ref="roleTable" @selection-change="getAssignRoleIds" border stripe>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="roleName" label="角色名"></el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>  
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="assignClose">取 消</el-button>
                <el-button type="primary" @click="assignConfirm">确 定</el-button>
            </div>
        </el-dialog>
     
  </div>
</template>

<script>
import { addUserApi, deleteUserApi, getUserListApi, updateUserApi ,checkRolesApi,saveRoleIdsByUserIdApi} from '@/api/sys-user';
export default {
  name: 'SysUserList',

  data() {
    return {
        //分配的用户id
        assignUserId:"",
        //分配的角色id
        assignRoleIds:[],
        
        roleTableList:[],
        assignDialog:{
            title:'',
            visible:false,
            width:'800px',
        },
        params:{
            trueName:'',
            phone:'',
            currentPage:1,
            pageSize:5,
            total: 0
        },
        tableList:[],
        //编辑对话框
        editDialog:{
            title:'',
            visible:false,
            width: '800px',

        },
        //编剧数据
        editModel:{
            userId:"",
            type:"",//0为新曾 1为编辑
            trueName:"",
            sex:"",
            phone:"",
            idCard:"",
            username:"",
            password:"",
            enabled:"",
            status:"",
        },
      
    };
  },

  mounted() {
    this.getUserList();
    
  },

  methods: {
    async assignRole(row){
            //1.设置对话框
            this.assignDialog.title=`【为${row.trueName}分配角色】`;
            this.assignDialog.visible = true;
            //2.获得所有角色数据，以及用户选中状态
            let res = await checkRolesApi(row.userId);
            if(res && res.code==200){
                this.roleTableList = res.data;
                this.$nextTick(()=>{//重新渲染函数
                    for(let i=0;i<this.roleTableList.length;i++){
                        let role = this.roleTableList[i];
                        if(role.checked){
                            this.$refs.roleTable.toggleRowSelection(role,true);

                        }
                    }
                });
                
            }
            //3.设置用户id
            this.assignUserId = row.userId;
        },

         //取消分配角色
         assignClose(){
            this.assignDialog.visible=false;
        },
        //获取角色选中状态
        getAssignRoleIds(val){
            let roleIds = [];
            val.forEach(role => {
                roleIds.push(role.roleId)
            });
            this.assignRoleIds = roleIds;
        },
        //确认分配角色
        async assignConfirm(){
            let res = await saveRoleIdsByUserIdApi({
                userId:this.assignUserId,
                roleIds:this.assignRoleIds
            })
            if(res && res.code==200){
                this.$message.success(res.msg);
                this.assignDialog.visible=false;
            }
        },
    async changeUserEnabled(row){
        let res =await updateUserApi(row);
        if(res && res.code==200){
            this.getUserList();
            this.$message.success(res.msg);
        }

    },
   async changeUserStatus(row){
        let res =await updateUserApi(row);
        if(res && res.code==200){
            this.getUserList();
            this.$message.success(res.msg);
        }
    },

    async getUserList(){
        let res =await getUserListApi(this.params);
        if(res.code==200){
            this.tableList=res.data.records;
            this.params.total=res.data.total;
        }
       },
        searchBtn(){
            this.getUserList();
        },

        resetBtn(){
            this.params.trueName='';
            this.params.phone='';
            this.getUserList();
        },
    

   async deleteUser(row){
        let confirm=await this.$myConfirm(`你确认要删除${row.trueName}吗?`)
        if(confirm){
            let res= await deleteUserApi(row.userId)
            if(res && res.code==200){
                this.$message.success(res.msg)
                this.getUserList();
            }else{
                this.getUserList();
                this.$message.error(re.msg);
            }
    }
    },

    editUser(row){
        //清空表单
        this.$resetForm('editForm',this.editModel);
        //复制表单
        this.$objCopy(row,this.editModel);
        //设置编辑 状态
        this.editModel.type="1";
        //设置对话框
        this.editDialog.title=`编辑用户-${row.trueName}`;
        this.editDialog.visible=true;
    },
    addUser(){
        //清空表单数据
        this.$resetForm("editForm",this.editModel)
        //设置编辑 类型为 添加
        this.editModel.type="0";
        //设置标题
        this.editDialog.title="新增员工";
        this.editDialog.visible=true;

    },
    onClose(){
        this.editDialog.visible=false;
    },
   async onConfirm(){
       await this.$refs.editForm.validate(async valid=>{
            if(valid){
                let res =null;
                if(this.editModel.type=="0"){
                    res=await addUserApi(this.editModel);
                }else{
               
                    res=await updateUserApi(this.editModel);
                   
                }
                if(res && res.code==200){
                    this.editDialog.visible=false;
                    this.$message.success(res.msg);
                    //查询方法
                    this.getUserList();
                }
            }
        })
    },
    
  },
    rules:{
            trueName: [{
                required: true,
                trigger: "blur",
                message: "请填写姓名",
            }],
            sex: [{
                required: true,
                trigger: "blur",
                message: "请选择性别",
            }],
            phone: [{
                required: true,
                trigger: "blur",
                message: "请填写电话",
            }],
            idCard: [{
                required: true,
                trigger: "blur",
                message: "请填写身份证",
            }],
            username: [{
                required: true,
                trigger: "blur",
                message: "请输入用户名",
            }],
            password: [{
                required: true,
                trigger: "blur",
                message: "请输入密码",
            }],
            enabled: [{
                required: true,
                trigger: "blur",
                message: "请选择是否禁用",
            }],
            status: [{
                required: true,
                trigger: "blur",
                message: "请选择是否离职",
            }],
}
};
</script>